<template>
	<div>
		<div class="header flex a-center jlr">
			<div class="back" @click="back"><i class="iconfont icon-arrow-left-copy"></i></div>
			<h2>每日新品</h2>
			<div class="back">&nbsp;</div>
		</div>
		<div class="abox yellow">
			<div class="swiperTop"><top :type.sync="type" @cb="cb"></top></div>
			<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
				<ul class="product">
					<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="init">
						<li class="flex col" v-for="(v,i) in productList" :key="i" @click="enter('/goodsdetail?productId='+v.productId)">
							<div class="productImage"><img :src="v.frontPicUrl"></div>
							<div class="productInfo flex col jlr">
								<div class="title">
									<b>热卖</b>{{v.productName}}
								</div>
								<div class="flex a-center jlr ce">
									<h4>￥<span>{{v.price}}</span></h4>
									<i class="iconfont icon-chat-gray"></i>
								</div>
							</div>
						</li>
					</van-list>
				</ul>
			</van-pull-refresh>
		</div>
	</div>
</template>
<script>
import top from './top.vue'
export default {
	data(){
		return {
			isLoading: false,

			loading: false,
			finished: false,

			type:-1,
			pageNum:1,
			pageSize:10,
			productList:[]
		}
	},
	components:{top},
	methods:{
		cb(){
			this.pageNum = 1
		},
		enter(v){
			this.$router.push(v)
		},
		back(){
			this.$router.go(-1)
		},
		init(){
			var that = this
			that.productList = []
			that.$ajax.selectProductsByClassId({indexClassId:that.type,pageNum:that.pageNum,pageSize:that.pageSize}).then(res=>{
				that.pageNum = that.pageNum+1
				let arr = res.data.productList
				that.productList = [...that.productList,...arr]
				this.loading = false;
				if(this.productList.length>=res.data.total){
					this.finished = true;
				}
			})
		},
		onRefresh(){
		  const that = this;
			this.pageNum = 1;
			this.$ajax.selectProductsByClassId({indexClassId:that.type,pageNum:that.pageNum,pageSize:that.pageSize}).then(res=>{
				this.isLoading = false;
				this.productList = res.data.productList
			})
		}
	},
	watch:{
		type(v){
			this.init()
		}
	}
}
</script>
